CSS Grid nosaukto apgabalu pārmantošana: vecākelementa režģa apgabalu izplatīšanas apgūšana

CSS Grid Layout ir jaudīgs rīks sarežģītu un adaptīvu tīmekļa izkārtojumu veidošanai. Viena no tā noderīgākajām funkcijām ir iespēja definēt nosauktos apgabalus, kas ļauj viegli pozicionēt elementus režģī. Lai gan nosaukto apgabalu pamati ir vienkārši, izpratne par to, kā tie mijiedarbojas ar ligzdotiem režģiem, īpaši izmantojot pārmantošanu, var atklāt vēl lielāku elastību un uzturamību jūsu CSS kodā. Šis raksts dziļi ienirst CSS Grid nosaukto apgabalu pārmantošanā un vecākelementa režģa apgabalu izplatīšanā, sniedzot praktiskus piemērus un labākās prakses, lai palīdzētu jums apgūt šo progresīvo tehniku.

Kas ir CSS Grid nosauktie apgabali?

Pirms mēs iedziļināmies pārmantošanā, ātri atkārtosim, kas ir CSS Grid nosauktie apgabali. Nosauktie apgabali ir reģioni režģī, kurus jūs definējat, izmantojot īpašību grid-template-areas. Jūs piešķirat nosaukumus šiem apgabaliem un pēc tam izmantojat īpašību grid-area bērnelementiem, lai tos ievietotu šajos nosauktajos reģionos.

Šeit ir vienkāršs piemērs:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: lightblue;
  padding: 10px;
}

.nav {
  grid-area: nav;
  background-color: lightgreen;
  padding: 10px;
}

.main {
  grid-area: main;
  background-color: lightcoral;
  padding: 10px;
}

.aside {
  grid-area: aside;
  background-color: lightyellow;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: lightgray;
  padding: 10px;
}

Šajā piemērā konteinera elements ir definēts kā režģis ar trīs kolonnām un trīs rindām. Īpašība grid-template-areas definē piecus nosauktos apgabalus: header, nav, main, aside un footer. Katrs bērnelements tiek ievietots tam atbilstošajā apgabalā, izmantojot īpašību grid-area.

Režģa apgabalu pārmantošanas izpratne

Tagad apskatīsim, kas notiek, ja jums ir ligzdoti režģi. Būtiska CSS Grid iezīme ir tā, ka grid-template-areas deklarācijas netiek pārmantotas pēc noklusējuma. Tas nozīmē, ka, ja jūs deklarējat nosauktos apgabalus vecākelementa režģī, šie nosaukumi *automātiski* neattiecas uz bērnelementu režģiem.

Tomēr mēs varam izmantot konceptu, kurā elements tiek definēts gan kā režģa elements (tā vecākelementa režģī), gan kā režģa konteiners (saviem bērniem), lai radītu jaudīgus ligzdotus izkārtojumus. Kad bērnelementa režģa elements pats par sevi ir režģa konteiners, jūs varat definēt tam savas grid-template-areas. Apgabalu nosaukumi *vecākelementa* režģī un apgabalu nosaukumi *bērnelementa* režģī ir pilnīgi neatkarīgi. Nav tieša pārmantošanas mehānisma, kas nodotu nosaukto apgabalu definīcijas uz leju pa DOM koku.

"Pārmantošana", par kuru mēs patiesībā runājam, ir ideja, ka mēs varam *izplatīt* vai *atspoguļot* vecākelementa režģa nosaukto apgabalu struktūru bērnelementa režģī, lai saglabātu vizuālo konsekvenci un izkārtojuma struktūru. Tas tiek panākts, atkārtoti definējot grid-template-areas bērnelementam, lai tas atbilstu vecākelementa apgabalu izkārtojumam.

Vecākelementa režģa apgabalu izplatīšana: izkārtojuma struktūras replicēšana

Galvenā tehnika, ko mēs izpētīsim, ir *vecākelementa režģa apgabalu izplatīšana*. Tā ietver bērnelementa režģa grid-template-areas eksplicītu atkārtotu definēšanu, lai tā atbilstu tā vecākelementa režģa struktūrai. Tas nodrošina veidu, kā radīt konsekventu izskatu un sajūtu dažādās jūsu vietnes sadaļās, vienlaikus gūstot labumu no CSS Grid elastības.

Piemērs: kartītes komponents režģī

Pieņemsim, ka jums ir lapas izkārtojums, kas definēts ar CSS Grid, un vienā no režģa apgabaliem jūs vēlaties attēlot vairākus kartīšu komponentus. Katrai kartītei vajadzētu būt galvenei, saturam un kājenei, kas sakārtoti līdzīgi kā kopējais lapas izkārtojums.

.page-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  gap: 20px;
}

.page-header {
  grid-area: header;
  background-color: #eee;
  padding: 15px;
  text-align: center;
}

.page-nav {
  grid-area: nav;
  background-color: #ddd;
  padding: 15px;
}

.page-main {
  grid-area: main;
  display: grid; /* Padarīt galveno apgabalu par režģa konteineru */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adaptīvs kartīšu izkārtojums */
  gap: 20px;
  padding: 15px;
}

.page-aside {
  grid-area: aside;
  background-color: #ddd;
  padding: 15px;
}

.page-footer {
  grid-area: footer;
  background-color: #eee;
  padding: 15px;
  text-align: center;
}

/* Kartītes komponenta stili */
.card {
  display: grid; /* Padarīt kartīti par režģa konteineru */
  grid-template-columns: 1fr;  /* Vienas kolonnas izkārtojums kartītē */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "card-header"
    "card-content"
    "card-footer";
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.card-header {
  grid-area: card-header;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

.card-content {
  grid-area: card-content;
  margin-bottom: 10px;
}

.card-footer {
  grid-area: card-footer;
  text-align: right;
  border-top: 1px solid #ccc;
  padding-top: 5px;
}

  
Galvene
  
  

    

      
Kartītes galvene 1
      
Šeit ir kartītes saturs.
      
Kājene
    

    

      
Kartītes galvene 2
      
Vēl viena kartīte ar kādu saturu.
      
Kājene
    
  
  
  

Šajā piemērā .page-main pats par sevi ir režģa konteiners, kas attēlo kartīšu komponentus. Katrs .card elements arī ir režģa konteiners. Ievērojiet, ka .card izmanto grid-template-areas, lai definētu savu iekšējo izkārtojumu, izmantojot atšķirīgus apgabalu nosaukumus (card-header, card-content, card-footer) nekā vecākelements .page-container. Šie apgabali ir pilnīgi neatkarīgi.

Struktūras atspoguļošana: piemērs ar sānjoslu

Tagad iedomāsimies, ka main apgabalā jūs vēlaties sadaļu, kas atspoguļo vecākelementa režģa struktūru, iespējams, lai izveidotu sānjoslu konkrētā rakstā. Jūs varat izplatīt vecākelementa režģa struktūru, lai to panāktu:

.article-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "article-header article-header"
    "article-nav article-main"
    "article-footer article-footer";
  gap: 10px;
}

.article-header {
  grid-area: article-header;
  background-color: #f0f0f0;
  padding: 10px;
}

.article-nav {
  grid-area: article-nav;
  background-color: #e0e0e0;
  padding: 10px;
}

.article-main {
  grid-area: article-main;
  padding: 10px;
}

.article-footer {
  grid-area: article-footer;
  background-color: #f0f0f0;
  padding: 10px;
}

HTML kodā jums būtu kaut kas līdzīgs šim:

  

    
Raksta galvene
    
    
Raksta saturs
    
  

Šeit .article-container atkārtoti definē grid-template-areas, lai atdarinātu bieži sastopamu lapas izkārtojuma struktūru (galvene, navigācija, galvenais saturs, kājene). Lai gan nosaukumi ir atšķirīgi (article-header, nevis tikai header), *izkārtojums* ir līdzīgs vecākelementa izkārtojumam.

Labākās prakses vecākelementa režģa apgabalu izplatīšanai

• Izmantojiet jēgpilnas nosaukumu konvencijas: Lai gan jums nav *obligāti* jāizmanto prefiksi, piemēram, "card-" vai "article-", tas ir ļoti ieteicams. Izvēlieties nosaukumus, kas skaidri norāda nosaukto apgabalu kontekstu. Tas novērš neskaidrības un padara jūsu CSS lasāmāku.
• Uzturiet konsekvenci: Izplatot režģa apgabalus, centieties saglabāt konsekvenci kopējā struktūrā. Ja vecākelementa režģim ir galvene, galvenais saturs un kājene, mēģiniet atspoguļot šo struktūru bērnelementa režģī, pat ja konkrētais saturs atšķiras.
• Izvairieties no dziļas ligzdošanas: Lai gan CSS Grid ļauj veikt dziļu ligzdošanu, pārmērīga ligzdošana var padarīt jūsu kodu grūti saprotamu un uzturamu. Apsveriet, vai vienkāršākas izkārtojuma tehnikas nebūtu piemērotākas sarežģītiem scenārijiem.
• Dokumentējiet savu kodu: Skaidri dokumentējiet savus CSS Grid izkārtojumus, īpaši, ja izmantojat nosauktos apgabalus un izplatīšanas tehnikas. Paskaidrojiet katra apgabala mērķi un to, kā tas attiecas uz kopējo izkārtojumu. Tas ir īpaši noderīgi lielākos projektos vai strādājot komandā.
• Izmantojiet CSS mainīgos (Custom Properties): Sarežģītākiem izkārtojumiem apsveriet CSS mainīgo izmantošanu, lai saglabātu režģa apgabalu nosaukumus. Tas ļauj jums viegli atjaunināt nosaukumus vienuviet, un izmaiņas atspoguļosies visā jūsu kodā.

Piemērs CSS mainīgo izmantošanai:

:root {
  --header-area: header;
  --nav-area: nav;
  --main-area: main;
  --aside-area: aside;
  --footer-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "var(--header-area) var(--header-area) var(--header-area)"
    "var(--nav-area) var(--main-area) var(--aside-area)"
    "var(--footer-area) var(--footer-area) var(--footer-area)";
  gap: 10px;
}

.header {
  grid-area: var(--header-area);
}

/* Un līdzīgi citiem elementiem */

Lai gan tas tieši neizplata vērtības, tas ļauj viegli mainīt režģa apgabala nosaukumu vienā vietā, kas pēc tam atspoguļojas visā jūsu stila lapā. Ja jums būtu jāmaina galvenes apgabala nosaukums no "header" uz "top", jūs to varat izdarīt vienuviet. Tā ir laba prakse, kas jāpatur prātā, lai uzlabotu koda lasāmību un uzturamību.

Pieejamības apsvērumi

Lietojot CSS Grid, vienmēr paturiet prātā pieejamību. Pārliecinieties, ka jūsu izkārtojums joprojām ir lietojams un saprotams lietotājiem ar invaliditāti, neatkarīgi no vizuālā noformējuma. Šeit ir daži galvenie pieejamības apsvērumi:

• Semantiskais HTML: Izmantojiet semantiskos HTML elementus (piem., <header>, <nav>, <main>, <aside>, <footer>), lai nodrošinātu struktūru un nozīmi jūsu saturam. Tas palīdz ekrāna lasītājiem un citām palīgtehnoloģijām saprast izkārtojumu.
• Loģiskā avota secība: Elementu secībai HTML avotā parasti jāatspoguļo satura loģiskā lasīšanas secība. CSS Grid var vizuāli pārkārtot elementus, bet avota secībai joprojām jābūt jēgpilnai lietotājiem, kuri paļaujas uz palīgtehnoloģijām.
• Navigācija ar tastatūru: Pārliecinieties, ka visi interaktīvie elementi (piem., saites, pogas, veidlapu lauki) ir pieejami, izmantojot tastatūras navigāciju. Izmantojiet atribūtu tabindex, lai kontrolētu secību, kādā elementi saņem fokusu.
• Krāsu kontrasts: Nodrošiniet pietiekamu krāsu kontrastu starp tekstu un fonu, lai saturs būtu lasāms lietotājiem ar vāju redzi. Izmantojiet krāsu kontrasta pārbaudītāju, lai pārliecinātos, ka jūsu krāsu kombinācijas atbilst pieejamības standartiem (WCAG).
• Adaptīvs dizains: Veidojiet adaptīvus izkārtojumus, kas pielāgojas dažādiem ekrāna izmēriem un ierīcēm. Izmantojiet multivides vaicājumus, lai pielāgotu režģa izkārtojumu un nodrošinātu, ka saturs paliek lietojams uz mazākiem ekrāniem.

Noslēgums

CSS Grid nosaukto apgabalu pārmantošana un vecākelementa režģa apgabalu izplatīšana ir jaudīgas tehnikas elastīgu un uzturamu tīmekļa izkārtojumu veidošanai. Izprotot, kā nosauktie apgabali mijiedarbojas ar ligzdotiem režģiem, jūs varat izveidot sarežģītus izkārtojumus ar konsekventu izskatu un sajūtu. Atcerieties izmantot jēgpilnas nosaukumu konvencijas, uzturēt konsekvenci, izvairīties no dziļas ligzdošanas un dokumentēt savu kodu. Ievērojot šīs labākās prakses, jūs varat izmantot CSS Grid jaudu, lai radītu satriecošu un pieejamu tīmekļa pieredzi lietotājiem visā pasaulē.